<template>

状态<select v-model="ShopState">
    <option :value="0">请选择</option>
    <option :value="1">启用</option>
    <option :value="2">禁用</option>
</select>
门店名称:<input type="text" v-model="ShopName">
<input type="button" value="查询" @click="LoadData">
    <h2>显示列表页</h2>
    <table border="1">
        <thead>
            <tr>
                <td>编号</td>
                <td>酒店名称</td>
                <td>星级</td>
                <td>省份</td>
                <td>门店图片</td>
                <td>状态</td>
                <td>小程序</td>
                <td>创建时间</td>
                <td>操作列</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <td>{{item.ShopId}}</td>
                <td>{{item.ShopName}}</td>
                <td>{{item.XingJi}}</td>
                <td>{{item.Address}}</td>
                <td><img style="width: 60px; height: 70px;" :src="item.ShopImg"></td>
                <td>{{item.ShopState==true?"启用":"禁用"}}</td>
                <td>{{item.YuYUe==true?"开启":"关闭"}}</td>
                <td>{{item.CreateTime}}</td>
                <td>操作列
                    <a href="#"  @click="Delete(item.ShopId)" style="margin-right:20px;">删除</a>
                    <a href="#"  @click="Update(item.ShopId)" style="margin-right:20px;">修改</a>
                </td>
            </tr>
        </tbody>
    </table>

    当前共{{ pageInfo.totalCount }}条,当前页共{{ pageInfo.pageSize }}条
    当前共{{ pageInfo.pageIndex }}/{{ pageInfo.pageCount }}页


    <span>
        <a href="#" style="margin-right: 20px;" @click="PageChange('F')">首页</a>
        <a href="#" style="margin-right: 20px;" @click="PageChange('U')">上一页</a>
        <a href="#" style="margin-right: 20px;" @click="PageChange('N')">下一页</a>
        <a href="#" style="margin-right: 20px;" @click="PageChange('E')">尾页</a>
    </span>


</template>
<script setup lang="ts">

import axios from 'axios';
import { onMounted ,ref} from 'vue';
import { useRouter } from 'vue-router';

const router=useRouter();


const Update=(sid:number)=>{

    router.push({
        name:"UpdateShop",
        params:{
            id:sid
        }
    })


}

const info=ref([{

    ShopId:0,
    ShopName:"",
    ShopState:true,
    Address:"",
    YuYUe:true,
    ShopImg:"",
     XingJi:"",
     CreateTime:""

}])

//删除
const Delete=(sid:number)=>{
    if(confirm("你确定要删除吗?")){

        axios.get('https://localhost:7030/api/Shop/DeleteShop',
        {
            params:{
                ShopId:sid
            }
    
        }
        

        
        )
        .then(res=>{
            if(res.data>0){
                alert("删除成功");
                LoadData();
            }
            else{
                alert("删除失败");
            }
        })



    }



}


const pageInfo=ref({
    pageIndex:1,
    pageSize:2,
    totalCount:0,
    pageCount:0
    

})

const ShopState=ref(0);
const ShopName=ref("");
onMounted(()=>{
    LoadData()
})

const LoadData=()=>{

    axios.get('https://localhost:7030/api/Shop/ShowShop',
    
    {
        params:{
            ShopState:ShopState.value,
            ShopName:ShopName.value,
            pageIndex:pageInfo.value.pageIndex,
            pageSize:pageInfo.value.pageSize


        }
    }
    
    )

    .then(res=>{
        
        pageInfo.value.totalCount=res.data.TotalCount;
        pageInfo.value.pageCount=res.data.PageCount;
        info.value=res.data.Data_Info
        console.log(
            info.value
        );
        

    })


}

//分页
const PageChange=(choose:string)=>{

    switch(choose){
        case "F":
            pageInfo.value.pageIndex=1;
            break;
            case "U":
            pageInfo.value.pageIndex=pageInfo.value.pageIndex-1;
            break;
            case "N":
            pageInfo.value.pageIndex=pageInfo.value.pageIndex+1;
            break;
            case "E":
            pageInfo.value.pageIndex=pageInfo.value.pageCount;
            break;


    }
    LoadData();


}

</script>